<f:view xmlns="http://www.w3.org/1999/xhtml"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:p="http://primefaces.org/ui"
	xmlns:pm="http://primefaces.org/mobile" contentType="text/html">
	
	<f:metadata>
		<f:event listener="#{pageBean.check}" type="preRenderView"></f:event>
	</f:metadata>
	
	<pm:page title="Add/Edit Grocery List">

		<h:outputScript name="some.js" />
		<h:outputScript library="javax.faces" name="jsf.js" target="head" />


		<pm:view id="grocerylistadd">
			<h:form id="groceryListForm">
				<pm:header title="Add/Edit Grocery List">
					<f:facet name="right">
						<h:commandButton value="Add Item" id="create"
							action="#{groceryListBean.prepareItemForAdd}" />
					</f:facet>
				</pm:header>
				
				<pm:content>
				 <p:messages autoUpdate="true"/>

					<h3>Grocery List Attributes</h3>
					<table style="width: 100%">
						<tr width="30%">
							<td>Name:</td>
							<td><p:inputText value="#{groceryListBean.groceryList.name}" />
							</td>
						</tr>
						<tr width="30%">
							<td>Date (use format mm/dd/yyyy):</td>
							<td><p:calendar
									value="#{groceryListBean.groceryList.shoppingDate}" converterMessage="Date should be in mm/dd/yyyy format" /></td>
						</tr>
						<tr width="30%">
							<td>Description:</td>
							<td><p:inputTextarea
									value="#{groceryListBean.groceryList.description}" /></td>
						</tr>
					</table>

					<h3>Grocery List Items</h3>
					<p:dataList var="glistitem"
						value="#{groceryListBean.sortedItems}"
						emptyMessage="Oh well...">


						<div style="float: left; width: 85%">

							<h3>#{glistitem.name}</h3>

							<p>Category: #{glistitem.category}</p>
							<p>
								Quantity: #{glistitem.quantity} #{glistitem.measurement}
							</p>

						</div>



						<div>

							<pm:buttonGroup orientation="horizontal">
							
							    <!-- edit grocery list item -->
							    <p:commandLink
									action="#{groceryListBean.editItemFromGroceryList}">
									<f:param name="groceryListItemName" value="#{glistitem.name}" />
									<h:graphicImage library="images" name="pen_alt_stroke_32x32.png" />
								</p:commandLink>
								<!-- delete grocery list item -->
								<p:commandLink
									action="#{groceryListBean.deleteItemFromGroceryList}">
									<f:param name="groceryListItem" value="#{glistitem.name}" />
									<h:graphicImage library="images" name="x_alt_32x32.png" />
								</p:commandLink>
							</pm:buttonGroup>

						</div>




					</p:dataList>

					<br />
					<br />
					<center>
						<pm:buttonGroup orientation="horizontal">
							<h:commandButton value="Save List"
								action="#{groceryListBean.saveList}"/>
							<h:commandButton value="Cancel" action="grocerylists"/>
						</pm:buttonGroup>
					</center>


				</pm:content>
			</h:form>
		</pm:view>
	</pm:page>

</f:view>

